<template>
  <el-scrollbar style="height:100%;">
    <div class="container p-20">
      <el-row>
        <el-col :offset="18" :span="4">
          <!-- @click="print" -->
          <el-button class="NoPrint" type="primary" @click="print">打印</el-button>
          <el-button class="NoPrint" type="info" @click="$router.push(`/cost/edit/${$route.params.id}`)">取消</el-button>
        </el-col>
      </el-row>
      <div id="printDIV">
        <el-row>
          <el-col :offset="3" :span="18">
            <p class="f-20 f-center zm-title">中煤南方能源有限公司物业收费通知单</p>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18 f-center">房租日期:{{data.expenseMonth | timeFormatFilter('yyyy年mm月')}}</p>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18 d-flex d-p-flex">
              <span>合同:{{data.contractNumber}}</span>
              <span>承租人:{{data.tenantName}}</span>
              <span>地址:{{data.address}}</span>
            </p>
          </el-col>
          <el-col :offset="3" :span="18">
            <table border="1" cellspacing="0">
              <tr>
                <td>单元编码 </td>
                <td>{{data.roomNomber}}</td>
                <td>水费编码 </td>
                <td>{{data.waterCostCode}}</td>
                <td>电费编码 </td>
                <td>{{data.electricCostCode}}</td>
                <td>气费编码 </td>
                <td>{{data.coalGasCostCode}}</td>
                <td>热水编码 </td>
                <td>{{data.hotWaterCostCode}}</td>                
              </tr>
            </table>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18">
              水电煤气收费日期截至到 {{data.expenseMonth | timeFormatFilter('yyyy年mm月')}}，以行度为准。若有疑问，请电:25122920
              <!-- 水电煤气收费日期截至到{{data.expenseMonth | timeFormatFilter('yyyy年mm月')}}，以行度为准。若有疑问，请电:25122920 -->
            </p>
          </el-col>
          <el-col :offset="3" :span="18">
            <table border="1" cellspacing="0">
              <tr>
                <th colspan="2">水费</th>
                <th colspan="2">电费</th>
                <th colspan="2">煤气费</th>
                <th colspan="2">其他费用</th>
                <th colspan="2">热水费</th>
              </tr>
              <tr>
                <td>本月行度 </td>
                <td>{{data.monthWaterMobility}}</td>
                <td>本月行度 </td>
                <td>{{data.monthElectricityMobility}}</td>
                <td>本月表数 </td>
                <td>{{data.monthGasMobility}}</td>
                <td>房租 </td>
                <td>{{data.monthlyRent}}</td>
                <td>本月行度 </td>
                <td>{{data.monthHotWaterMobility}}</td>
              </tr>
              <tr>
                <td>上月行度 </td>
                <td>{{data.lastMonthWaterMobility}}</td>
                <td>上月行度 </td>
                <td>{{data.lastMonthElectricityMobility}}</td>
                <td>上月表数 </td>
                <td>{{data.lastGasMobility}}</td>
                <td>电话费</td>
                <td>{{data.telephoneRate}}</td>
                <td>上月行度 </td>
                <td>{{data.lastMonthHotWaterMobility}}</td>                
              </tr>
              <tr>
                <td>用水量 </td>
                <td>{{data.waterConsumption}}</td>
                <td>倍率 </td>
                <td>{{data.electricRate}}</td>
                <td>本月用气量</td>
                <td>{{data.monthGasConsumption}}</td>
                <td>综合管理费</td>
                <td>{{data.comprehensiveManagementRate}}</td>
                <td>用水量 </td>
                <td>{{data.hotWaterConsumption}}</td>                
              </tr>
              <tr>
                <td>水损(量) </td>
                <td>{{data.waterLossConsumption}}</td>
                <td>公共用电分摊 </td>
                <td>{{data.publicElectricitySharing}}</td>
                <td>第一档单价</td>
                <td>{{data.oneUnitPrice}}</td>
                <td>电梯费</td>
                <td>{{data.elevatorRate}}</td>
                <td>热水单价</td>           
                <td>{{data.unitPriceHotWater}}</td>           
              </tr>
              <tr>
                <td>指标内水价{{data.lessThanWater}}内 </td>
                <td>{{data.lessUnitPriceOfWater}}</td>
                <td>实际用量 </td>
                <td>{{data.electricActualConsumption}}</td>
                <td>第二档单价</td>
                <td>{{data.twoUnitPrice}}</td>
                <td>垃圾处理费</td>
                <td>{{data.trashHandlingFee}}</td>
                <td></td>           
              </tr>
              <tr>
                <td>指标外水价{{data.lessThanWater}}-{{data.greaterThanWater}} </td>
                <td>{{data.middleUnitPriceOfWater}}</td>
                <td>{{data.lessElectricityConsumption}}度单价 </td>
                <td>{{data.lessUnitPriceOfElectricity}}</td>
                <td>第三档单价</td>
                <td>{{data.threeUnitPrice}}</td>
                <td>排水费</td>
                <td>{{data.drainageFee}}</td>
                <td></td>           
              </tr>
              <tr>
                <td>实际单价{{data.greaterThanWater}}以上 </td>
                <td>{{data.greaterUnitPriceOfWater}}</td>
                <td>{{data.lessElectricityConsumption}}-{{data.greaterElectricityConsumption}}度单价 </td>
                <td>{{data.middleUnitPriceOfElectricity}}</td>
                <td>气费</td>
                <td>{{data.gasShortage}}</td>
                <td>卫生费</td>
                <td>{{data.sanitationFee}}</td>
                <td></td>           
              </tr>
              <tr>
                <td>加压管理费 </td>
                <td>{{data.pressureAdministrationCosts}}</td>
                <td>>{{data.greaterElectricityConsumption}}度单价 </td>
                <td>{{data.greaterUnitPriceOfElectricity}}</td>
                <td>欠费</td>
                <td>{{data.gasArrears}}</td>
                <td>电视费/煤保</td>
                <td>{{data.gasInsurance}}</td>
                <td></td>           
              </tr>
              <tr>
                <td>水费税金 </td>
                <td>{{data.waterTariff}}</td>
                <td>基础电价</td>
                <td>{{data.basicElectricityPrice}}</td>
                <td>换表费</td>
                <td>{{data.gasChangeWatchSpense}}</td>
                <td>本体维修基金</td>
                <td>{{data.maintenanceFund}}</td>
                <td></td>           
              </tr>
              <tr>
                <td>基本水费</td>
                <td>{{data.basicWaterPrice}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>其他</td>
                <td>{{data.otherPrice}}</td>
                <td></td>           
              </tr>
              <tr>
                <td>小计 </td>
                <td>{{data.waterRentSubtotal}}</td>
                <td>小计 </td>
                <td>{{data.electricRentSubtotal}}</td>
                <td>小计</td>
                <td>{{data.gasRentSubtotal}}</td>
                <td>小计</td>
                <td>{{data.otherSubtotal}}</td>
                <td>小计</td>           
                <td>{{data.hotWaterRentSubtotal}}</td>           
              </tr>
              <tr>
                <td colspan="2">人民币总额 </td>
                <td colspan="6">{{data.totalAmount}}</td>
              </tr>
            </table>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18">
              注:以上款项应在每月15日前交纳，迟交加收滞纳金0.5%;并停止供水供电及其他服务
            </p>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18">
              户名:中煤南方能源有限公司 开户行:中行人民南路支行 账号:752357951315
            </p>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18">
              户名:中煤南方能源有限公司 开户行:工商银行莲塘支行 账号:4000026419200033757
            </p>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18">
              户名:深圳市燕美工贸有限公司 开户行:中国银行深圳宝安支行营业部 账号:756257932181
            </p>
          </el-col>
          <el-col :offset="3" :span="18">
            <p class="f-18">
              我司已开通微信公众号:中煤微物业，客户通过公众号在线缴费，如需开通缴费账户请与管理处联系
            </p>
          </el-col>
        </el-row>
        <el-row >
          <el-col :offset="3" :span="18">
            <p class="f-18" v-if="bHasWaterDeviceChange">上月该房间有换<span class="color-red">水表</span>,具体用量以实际计算为准，
                <el-link class="primary" @click="$router.push('/room/edit?id='+data.fkRoomId)">点击查看换表记录</el-link>
            </p>
          </el-col>
          <el-col :offset="3" :span="18">                
                <p class="f-18" v-if="bHasHotWaterDeviceChange">上月该房间有换<span class="color-red">热水表</span>,具体用量以实际计算为准，
                    <el-link class="primary" @click="$router.push('/room/edit?id='+data.fkRoomId)">点击查看换表记录</el-link>
                </p>
          </el-col>  
          <el-col :offset="3" :span="18">                
                <p class="f-18" v-if="bHasElectricDeviceChange">上月该房间有换<span class="color-red">电表</span>,具体用量以实际计算为准，
                    <el-link class="primary" @click="$router.push('/room/edit?id='+data.fkRoomId)">点击查看换表记录</el-link>
                </p>
          </el-col>
          <el-col :offset="3" :span="18">                
                <p class="f-18" v-if="bHasGasDeviceChange">上月该房间有换<span class="color-red">气表</span>,具体用量以实际计算为准，
                    <el-link class="primary" @click="$router.push('/room/edit?id='+data.fkRoomId)">点击查看换表记录</el-link>
                </p>
            </el-col>
        </el-row> 
      </div>
      <p class="f-20 m-b-20" style="margin-top: 40px;">缴费记录</p>
      <el-row>
        <el-col :span="24">
          <el-table class="bottom-table" :data="historicalPayments">
            <el-table-column prop="createdBy" label="经手人">
            </el-table-column>
            <el-table-column prop="paymentMethod" label="缴费方式">
              <template slot-scope=" {row}">
                {{ row.paymentMethod | paymentMethodFilter}}
              </template>
            </el-table-column>
            <el-table-column prop="creationDate" label="缴费时间">
            </el-table-column>
            <el-table-column prop="amountCollected" label="实收费用">
            </el-table-column>
            <el-table-column prop="paymentVoucher" label="凭证">
              <template slot-scope="{row}">
                <template v-if="row.paymentVoucher">
                  <up-img :imgList="row.paymentVoucher" pattern btnTxt="查看凭证"></up-img>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="paymentInstruction" label="缴费说明">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>
<script>
import { getDeviceChangesByRoomId_CurrentMonth } from "@/api/house/room/room.js";
import upImg from '@/components/upImg'
import { SummerAndWinter } from '@/api/common/common'
import { getHistoricalPaymentsByExpenseManagId, getNoticeByContractId } from '@/api/operations/cost/cost'
export default {
  components: { upImg },
  data() {
    return {
      data: {
        address: null,//地址
        area: null,//区名称
        buildingName: null,//楼宇名称
        city: null,//市名称
        coalGasCostCode: null,//煤气费用编码
        comprehensiveManagementRate: null,//综合管理费用
        constructionArea: null,//建筑面积
        contractNumber: null,//合同编码
        drainageFee: null,//排水量
        electricActualConsumption: null,//实际用量
        electricClassificationCode: null,//电费税务分类编码
        electricCostCode: null,//电费编码
        electricLossCoefficient: null,//电损系数
        electricRate: null,//倍率(电)
        electricRentSubtotal: null,//电费小计
        electricTaxRate: null,//电费税率
        elevatorFeeClassificationCode: null,//电梯费税务分类编码
        elevatorFeeTaxRate: null,//电梯费税率
        elevatorRate: null,//电梯费
        expenseMonth: null,//房租日期，年月
      },
      historicalPayments: [],
      bHasWaterDeviceChange:false,
      bHasHotWaterDeviceChange:false,
      bHasElectricDeviceChange:false,
      bHasGasDeviceChange:false      
    };
  },
  methods: {
    loadData(id) {
      getNoticeByContractId(id).then(res => {
        if (res.code === 10000) {
          this.data = res.data;
          getDeviceChangesByRoomId_CurrentMonth(this.data.fkRoomId,"true").then( res => { 
                        if (res.code == 10000) {
                            let deviceChanges = res.data;
                            let iLen =deviceChanges.length;
                            if (iLen > 0) {
                                for (let i = 0;i < iLen;i++) {
                                    //如果之前没有换水表记录，就到当前记录看是否有 换水表记录；否则略过这条记录的水表检测
                                    if (!this.bHasWaterDeviceChange)
                                        this.bHasWaterDeviceChange = deviceChanges[i].newWaterReading != null ? true:false;
                                    
                                    if (!this.bHasHotWaterDeviceChange)
                                        this.bHasHotWaterDeviceChange = deviceChanges[i].newHotWaterReading != null ? true:false;

                                    if (!this.bHasElectricDeviceChange)
                                        this.bHasElectricDeviceChange = deviceChanges[i].newElectricReading != null ? true:false;

                                    if (!this.bHasGasDeviceChange)
                                        this.bHasGasDeviceChange = deviceChanges[i].newGasReading != null ? true:false;
                                }
                            }
                            console.log('res.data='+res.data);
                            console.log('has water deviceChange='+this.bHasWaterDeviceChange);
                            console.log('has hot water deviceChange'+this.bHasHotWaterDeviceChange);
                            console.log('has electric deviceChange'+this.bHasElectricDeviceChange);
                            console.log('has gas deviceChange'+this.bHasGasDeviceChange);
                        }
                    });          
        }
      });
    },
    loadHistoricalPayments(id) {
      getHistoricalPaymentsByExpenseManagId(id).then(res => {
        if (res.code === 10000) {
          this.historicalPayments = res.data;
        }
      })
    },
    print() {
      var printBox = document.querySelector('#printDIV'); //获取需要打印的内容
      var newWin = window.open(); //新打开一个标签页，这样不会影响现使用的页面
      var styles = `<style>
                            *{font-size:14px;}
                            .zm-title{ font-size:20px;text-align:center; }
                            .el-row{padding-top:30px;}
                            P{margin:0px;}
                            table{width:100%;border:1px solid #e6e6e6;}
                            table td,table th{font-weight:500;border:1px solid #e6e6e6;line-height:20px;padding-left:10px;min-width:10px}
                            @page { size: portrait; }
                            .fy{page-break-before:always;}
                    </style>`;
      var newContent = styles + "<div class='fy'>" + printBox.innerHTML + "</div>";
      newWin.document.body.innerHTML = newContent; //将打印的部分赋值给新打开的标签页
      newWin.window.print();//执行打印
      newWin.window.close();//关闭打印窗口
    }
  },
  mounted() {
    if (this.$route.params.id) {
      this.loadData(this.$route.params.id);
      this.loadHistoricalPayments(this.$route.params.id);
    }
  },
};
</script>
<style scoped>
table {
  width: 100%;
  margin: 10px 0;
  border: 1px solid #e6e6e6;
}

table td,
table th {
  font-size: 0.2rem;
  font-weight: 500;
  border: 1px solid #e6e6e6;
  line-height: 0.4rem;
  padding-left: 0.1rem;
  min-width: 1rem;
}

@page {
  size: auto;
  margin: 0mm;
}
</style>
